/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

/************************第一个示范例子***************************/

// export default class AwesomeProject extends Component {
// 	// 组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。
//   render() {
//     return (
//     //	JSX语法却是让你在代码中嵌入结构标记
//     // 这种写法很像web上的HTML，只不过使用的并不是web上常见的标签如<div>或是<span>等，这里我们使用的是React Native的组件
//       <View style={styles.container}>
//         <Text style={styles.welcome}>
//           Welcome to React Native!
//         </Text>
//         <Text style={styles.instructions}>
//           To get started, edit index.ios.js
//         </Text>
//         <Text style={styles.instructions}>
//           Press Cmd+R to reload,{'\n'}
//           Cmd+D or shake for dev menu
//         </Text>
//       </View>
//     );
//   }
// }

// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     justifyContent: 'center',
//     alignItems: 'center',
//     backgroundColor: '#F5FCFF',
//   },
//   welcome: {
//     fontSize: 10,
//     textAlign: 'center',
//     margin: 10,
//   },
//   instructions: {
//     textAlign: 'center',
//     color: '#333333',
//     marginBottom: 5,
//   },
// });

// 定义了一个名为HelloWorldApp的新的组件（Component），并且使用了名为AppRegistry的内置模块进行了“注册”操作

// 注意，这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
// AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器，而不是每个组件模块都注册
// 注册应用(registerComponent)后才能正确渲染
// 一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次
// AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
/************************第一个示范例子***************************/

/************************state(状态)***************************/

// 使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
// 一般来说，你需要在constructor中初始化state，然后在需要修改时调用setState方法。
// class Blink extends Component {
//   constructor(props) {
//     super(props);
//     this.state = { showText: true };

//     // 每1000毫秒对showText状态做一次取反操作
//     setInterval(() => {
//       this.setState({ showText: !this.state.showText });
//     }, 1000);
//   }

//   render() {
//     // 根据当前showText的值决定是否显示text内容
//     let display = this.state.showText ? this.props.text : ' ';
//     return (
//       <Text>{display}</Text>
//     );
//   }
// }

// class BlinkApp extends Component {
//   render() {
//     return (
//       <View>
//         <Blink text='I love to blink' />
//         <Blink text='Yes blinking is so great' />
//         <Blink text='Why did they ever take this out of HTML' />
//         <Blink text='Look at me look at me look at me' />
//       </View>
//     );
//   }
// }

// AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);

/************************state(状态)***************************/

/************************样式***************************/
// 所有的核心组件都接受名为style的属性
// 样式名基本上是遵循了web上的CSS的命名，只是按照JS的语法要求使用了驼峰命名法
// 实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式
// style属性可以是一个普通的JavaScript对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。
// 常见的做法是按顺序声明和使用style属性，以借鉴CSS中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。
class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
/************************样式***************************/

/*************************高度与宽度***************************/
// 最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。
// React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点

// 指定宽高：当要求在不同尺寸的屏幕上都显示一样的大小时，可以把组件的长宽写死
// 弹性宽高：在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。
// 如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。
// 组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。
// class FixedDimensionsBasics extends Component {
//   render() {
//     return (
//       // <View>
//       //   <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
//       //   <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
//       //   <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
//       // </View>
//        <View style={{height:300}}>// 垂直高度300，view中的子组件将300六等分，分别按比例1、2、3分配父容器的高度
//         <View style={{flex: 1, backgroundColor: 'powderblue'}} />
//         <View style={{flex: 2, backgroundColor: 'skyblue'}} />
//         <View style={{flex: 3, backgroundColor: 'steelblue'}} />
//       </View>
//     );
//   }
// };

// AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

/*************************高度与宽度***************************/


/*************************使用Flexbox布局***************************/
// class AlignItemsBasics extends Component {
//   render() {
//     return (
//       // 使用flexbox规则来指定某个组件的子元素的布局
//       <View style={{
//         flex: 1,
//         flexDirection: 'column',// 主轴垂直方向，row为水平方向，默认值为column
//         justifyContent: 'space-between',// 子元素沿主轴的排列方式，
//         //flex-start:从头开始，默认值
//         //center:居中;
//         //flex-end:从尾部开始;
//         //space-around:中间等间隔，头尾为中间间隔的一半;
//         //space-between:头尾顶住，中间等间隔;
//         alignItems: 'center',// 次轴的排列方式 
//         //flex-start：从起始端开始
//         //center
//         //flex-end：从末尾端开始
//         //stretch：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸,要把示例代码的width删除，表现为水平方向拉伸占满
//       }}>
//         <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
//         <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
//         <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
//         <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
//       </View>
//     );
//   }
// };

// AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

/*************************使用Flexbox布局***************************/
